<template>
  <div>
    <addPs
      :showAlert.sync="showAlert"
      :pid="id"
      @getPs="getPermissionList()"
      ref="edit"
    ></addPs>
    <el-card style="margin: 20px; text-align: right">
      <el-button type="primary" @click="addBtn('0')">添加权限</el-button>
    </el-card>
    <el-card style="margin: 20px">
      <el-table style="width: 100%" border :data="Permission" row-key="id" lazy>
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="code" label="标识" align="center">
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="success" size="mini" @click="addBtn(row.id)"
              >添加</el-button
            >
            <el-button type="primary" size="mini" @click="editBtn(row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteBtn(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import addPs from "./addPermission";
import {
  addPermission,
  getPermissionList,
  delPermission,
} from "@/api/permission";
import { formatDeparts } from "@/utils/formatTree";
export default {
  name: "permission",
  components: {
    addPs,
  },
  data() {
    return {
      id: "0",
      Permission: [],
      showAlert: false,
    };
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    async getPermissionList() {
      let result = await getPermissionList();
      this.Permission = formatDeparts(result, "0");
      console.log("p", this.Permission);
    },
    addBtn(id) {
      console.log(id, "id");
      this.id = id;
      this.showAlert = true;
    },
    editBtn(id){
        this.showAlert = true;
        this.$refs.edit.getPermissionDetail(id);
    },
    deleteBtn(id) {
      this.$confirm("确认删除该权限吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await delPermission(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getPermissionList();
          } catch (error) {
            this.$message({
              type: "info",
              message: "删除失败!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
</style>